<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>{$audio_arr.audio_name}</title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js"></script>
		<script src="__PUBLIC__/midi/js/public.js"></script>
		<script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
    <script src="__PUBLIC__/midi/js/jquery-ui.js"></script>
		<style>
             .player{
				width: 1200px;
				max-width: 1200px;
				margin: 30px auto;
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
			}
			.player .music-main{
				-webkit-box-flex: 1;
				-webkit-flex-grow: 1;
			}
			.player .gongneng img{
				width: 77%;
			}
			.music-main p{
				font-size: 2.4rem;
				padding-left: 4vw;
				margin-bottom: 4vh;
			}
			.bk{
				height: 50px;
				background-color: #f5f5f8;
			}



			#musicAudio{
				/*padding-left: 36px;*/
				/*padding-right: 32px;*/
				display: -webkit-flex;
				text-align: center;
				align-items: center;
			}
			#musicAudio span{
				/*font-size: 3.05555556vw;*/
				font-size: 1.6rem;
				color: #95a5a6;
			}
			#currentTime,#totalTime{
				-webkit-box-flex: 1;
				-webkit-flex-grow: 1;
			}
			#musicAudioProgress,#musicAudioProgressPar{
                height:10px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            #musicAudioProgressPar{
                 width:140px;
                 background-color: #eee;
                 -webkit-box-flex: 7;
                 -webkit-flex-grow: 7;
            }
            #musicAudioProgress{
                 width:0px;
                 background-color: #29d0c9;
                 display: -webkit-flex;
                 align-items: center;
                 position: relative;
            }
            #musicAudioProgress img{
            	position: absolute;
            	top: 50%;
            	margin-top: -12.5px;
            	/*left: 0px;*/
              right: 0px;
            }
            /*.gongneng{
            	margin-top: 36px;
            	margin-bottom: 108px;
            }*/
            .gongneng ul{
            	display: -webkit-flex;
            	align-items: center;
            }
            .gongneng ul li{
            	-webkit-box-flex: 1;
            	-webkit-flex-grow: 1;
            }
            .gongneng ul .left{
            	text-align: right;
            }
            .gongneng ul .mid{
            	text-align: center;
            }
            .title{
            	/*padding-left: 36px;*/
            	/*margin-bottom: 35px;*/
            	width: 1200px;
            	margin: 0 auto;
            }
            .title p{
            	/*font-size: 4.1666667vw;*/
            	font-size: 2.4rem;
            	color: #333;
            	/*margin-bottom: 34px;*/
            	margin-bottom: 20px;
            	width: 1200px;
            	margin: 0 auto;
            	padding: 30px 0;
            	display: inline-block;
            	border-bottom: 4px solid #000;
            	margin-bottom: 30px;
            	width: auto;

            }
            .title .line{
            	width: 186px;
            	height: 4px;
            	background-color: #333;
            }
        	.btn:hover{
        		background-color: #29d0c9;
        		color: #fff;
        	}
            .introduce{
            	padding-left: 30px;
            	padding-right: 34px;
            	/*font-size: 3.33333333vw;*/
            	font-size: 1.6rem;
            	color: #999;
            	padding-bottom: 35px;
            	width: 1200px;
            	margin:  0 auto;
            }
            .button-wrapper{
                    display: -webkit-box;
			    	display: -ms-flexbox;
			    	display: -webkit-flex;
			    	display: flex;
			    	-webkit-box-pack: center;
			    	-ms-flex-pack: center;
			    	-webkit-justify-content: center;
			    	justify-content: center;
			    	-webkit-box-align: center;
			    	-ms-flex-align: center;

            }
            .button-wrapper button{
            	background-color: #fff;
            	border: none;
            	padding: 1vw 2vw;
            	margin: 3vw;
            	font-size: 1.6rem;
            	outline:none;
            	border-radius: 5px;
            	cursor: pointer;
            }
            .button-wrapper .select{
            	background-color: #29d0c9;
            	color: #fff;
            }
            @media only screen and (min-width:1201px ) {
            	.wiezhi{
            		display: none;
            	}
            }
            @media only screen and (max-width:1200px ) {
            	.player{
            		width: calc(100% - 60px);
            		padding: 0 30px;
            	}
            	.music-main p{
            		font-size: 4.16666667vw;
            	}
            	#musicAudio span{
            		font-size: 4vw;
            	}
            	.title{
            		padding: 0 30px;
            		width: calc(100% - 60px);
            	}
            	.title p{
            		font-size: 4.1666667vw;
            	}
            	.introduce{
            		padding: 0 30px;
            		width: calc(100% - 60px);
            		font-size: 3.33333vw;
            	}
            	.button-wrapper button{
            		font-size: 3.333333vw;
            	}
              #musicAudioProgressPar,#musicAudioProgress{
                height: 20px;
              }
              #musicAudioProgress img{
                width: 45px;
                margin-top: -22.5px;
              }
            }

		</style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<div class="wiezhi">
			   <div class="con">
				  <span>当前位置：音频视频&gt;音频考级&gt; 音频详情</span>
			   </div>
		</div>
		<!--音乐播放器开始-->
		<div class="button-wrapper">
			<notempty name="audio_file1">
		       <button id="btn1" onclick="click1()" class="btn select">原曲</button>
		    </notempty>
		    <notempty name="audio_file2">
		    <if condition="$audio_major eq 2">
		        <button id="btn2" onclick="click2()" class="btn">有节拍器伴奏</button>
		    <else />
		    	<button id="btn2" onclick="click2()" class="btn">伴奏</button>
		    </if>
		    </notempty>
		    <notempty name="audio_file3">
		        <button id="btn3" onclick="click3()" class="btn">无节拍器伴奏</button>
		    </notempty>
		</div>
		<div class="player">
			<audio src="{$audio_arr.audio_file1}" id="audio"></audio>
			<div class="gongneng">
            	<ul>
            		<!-- <li class="left"><a><img src="__PUBLIC__/midi/mb-img/shangyiqu.png"/></a></li> -->
            		<li class="mid"><a><img src="__PUBLIC__/midi/mb-img/bofang.png" id="musicAudioPlayAndPause" onclick="playOrPaused(this);"/></a></li>
            		<!-- <li class="right"><a><img src="__PUBLIC__/midi/mb-img/xiayiqu.png"/></a></li> -->
            	</ul>
            </div>
		    <div class=music-main>
		        <p>{$audio_arr.audio_name}</p>
		    	<div id="musicAudio">
                <span id="currentTime">00:00</span>
                <div id="musicAudioProgressPar">
                    <div id="musicAudioProgress">
                    	<img src="__PUBLIC__/midi/mb-img/bofang_yuan(1).png" id="pro-yuan"/>
                    </div>
                </div>
                <span id="totalTime"></span>
            </div>
		    </div>
		</div>
		<div class="bk"></div>
		<!--音乐播放器结束-->
		<div class="title">
			<p>音频简介</p>
		</div>
		<p class="introduce">
			{$audio_arr.audio_introduction}
		</p>
		<script>
			var audio;
			var isdrag = false;
      		var tx,x;
	        var musicbar = document.getElementById("musicAudioProgressPar");
	        var playedbar = document.getElementById("musicAudioProgress");
	        var proyuan = document.getElementById("pro-yuan");
	        var musicwidth = musicbar.clientWidth;
			window.onload = function(){
				initAudio();
        // 进度条点击事件
         musicbar.onclick = function(event){
            var newCurrentime = (event.offsetX / musicwidth) * audio.duration;
            audio.currentTime = newCurrentime;
            var playedwidth = (audio.currentTime / audio.duration) * musicwidth;
            playedbar.style.width = playedwidth + "px";
            // proyuan.style.left = playedwidth + "px";
        }
         playedbar.onclick = function(event){
            var newCurrentime = (event.offsetX / musicwidth) * audio.duration;
            audio.currentTime = newCurrentime;
            var playedwidth = (audio.currentTime / audio.duration) * musicwidth;
            playedbar.style.width = playedwidth + "px";
            // proyuan.style.left = playedwidth + "px";
        }
        document.getElementById("musicAudioProgress").addEventListener('touchend',function(){
	        isdrag = false;
	    });
	    document.getElementById("musicAudioProgress").addEventListener('touchstart',selectmouse);
	    document.getElementById("musicAudioProgress").addEventListener('touchmove',movemouse);

              $('#musicAudioProgress').slider({
                      value: 0,
                     orientation: "horizontal",
                     range: "min",
                     animate: true,
                     step: 1
                 });


			}
			var initAudio = function(){
//				初始化对象
               audio = document.getElementById('audio');
               var audiolen;
               audio.addEventListener('canplay',function(){
               	  audiolen = audio.duration;
               	  var totalTime = parseInt(audiolen/60);
               	  var seconds = parseInt(audiolen%60);
               	     if(totalTime == 0){
               	     	if(seconds>9){
               	     		totalTime = "00:"+seconds;
               	     	}else{
               	     		totalTime ="00:0"+seconds;
               	     	}
               	     }else{
               	     	var totalTimePre,totalTimeNext;
               	     	if(totalTime>9){
               	     		totalTimePre = totalTime;
               	     	}else{
               	     		totalTimePre = "0"+totalTime;
               	     	}
               	     	if(seconds>9){
               	     		totalTimeNext=seconds;
               	     	}else{
               	     		totalTimeNext = "0"+seconds;
               	     	}
               	     	totalTime = totalTimePre+":"+totalTimeNext;
               	     }
               	     document.getElementById("totalTime").innerText = totalTime;
                   })
//                 初始化当前时间
                   getCurrentTime();
			}
//			更新进度条当前值
            function updateProgressVal(){
            	var zongkuan = $("#musicAudioProgressPar").width();
            	var progressVal = audio.currentTime/audio.duration*zongkuan;
            	document.getElementById("musicAudioProgress").style.width = (progressVal)+"px";
            }
//          更新当前时间
            function getCurrentTime(){
            	var currentTime = audio.currentTime;
            	var totalTime = parseInt(currentTime/60);
            	var seconds = parseInt(currentTime%60);
            	if(totalTime == 0){
            		if(seconds>9){
            			totalTime = "00:"+seconds;
            		}else{
            			totalTime = "00:0"+seconds;
            		}
            	}else{
            		var totalTimePre,totalTimeNext;
            		if(totalTime>9){
            			totalTimePre = totalTime;
            		}else{
            			totalTimePre="0"+totalTime;
            		}
            		if(seconds>9){
            			totalTimeNext = seconds;
            		}else{
            			totalTimeNext = "0"+seconds;
            		}
            		totalTime = totalTimePre+":"+totalTimeNext;
            	}
            	document.getElementById("currentTime").innerText = totalTime;
            }
//         暂停和播放
           var progressTimer;
           function playOrPaused(obj){
           	if(audio.paused){
           		audio.play();
           		progressTimer = window.setInterval(audioProgress,100);
           		document.getElementById("musicAudioPlayAndPause").setAttribute("src","__PUBLIC__/midi/mb-img/zanting.png");
           		return;
           	}
           	audio.pause();
           	document.getElementById("musicAudioPlayAndPause").setAttribute("src","__PUBLIC__/midi/mb-img/bofang.png");
           }

            function audioProgress(){
            	if(audio.currentTime<audio.duration){
            		if(audio.played){
            			getCurrentTime();
            			updateProgressVal();
            		}
            	}else{
            		audio.currentTime = 0;
                audio.play();
            	}
            }


			function click1(){
				$('#audio').attr('src','{$audio_arr.audio_file1}');
				$('.select').removeClass('select');
				$('#btn1').addClass('select');
				$("#musicAudioPlayAndPause").attr("src","__PUBLIC__/midi/mb-img/bofang.png");
			}
			function click2(){
				$('#audio').attr('src','{$audio_arr.audio_file2}');
				$('.select').removeClass('select');
				$('#btn2').addClass('select');
				$("#musicAudioPlayAndPause").attr("src","__PUBLIC__/midi/mb-img/bofang.png");
			}
			function click3(){
				$('#audio').attr('src','{$audio_arr.audio_file3}');
				$('.select').removeClass('select');
				$('#btn3').addClass('select');
				$("#musicAudioPlayAndPause").attr("src","__PUBLIC__/midi/mb-img/bofang.png");
			}

			function movemouse(e){
		          if (isdrag){
		          var n = tx + e.touches[0].pageX - x;
		          var touchcurrenttime = (n/musicwidth)*audio.duration;
		          audio.currentTime = touchcurrenttime;
		          var touchwidth = (audio.currentTime/audio.duration)*musicwidth;
		            $("#musicAudioProgress").css("width",touchwidth);
		             return false;
		           }
		      }

		      function selectmouse(e){
		           isdrag = true;
		          tx = parseInt(document.getElementById("musicAudioProgress").style.width+0);
		          x = e.touches[0].pageX;
		          return false;
		       }

		</script>
	</body>
</html>
